{% extends "base.html" %}

{% load custom_tag %}
{% load static %}
{% block  title %} 无忧cmdb | 首页{% endblock %}
<!-- {% block css %}
<link href="{% static 'plugins/index.css' %}" rel="stylesheet" />
{% endblock %} -->

{% block page-content %}

<article>
  <!-- Content Header (Page header) -->
  <section class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1>主机管理</h1>
        </div>
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="/dashboard/">Home</a></li>
            <li class="breadcrumb-item active">hosts</li>
          </ol>
        </div>
      </div>
    </div><!-- /.container-fluid -->
  </section>

  <!-- Main content -->
  <section class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-12">
          <div class="card">
            <div class="card-header">
              <h3 class="card-title">资产列表</h3>

              <span>&nbsp;&nbsp;在线主机</span>
              <span style="color:red"> : {{ paginator.count }}</span>

            </div>

            <div class="box">
              <form id="myform" class="form-horizontal" action="{% url 'core:search' %}" method="GET">
                {% csrf_token %}
                <div class="row">
                  <div class="col-sm-2">
                    <input class="form-control input-sm" type="text" name="hostinfo" id="hostname"
                      placeholder="搜索ip,serverid信息" />
                  </div>


                  <div class="col-sm-2">
                    <select class="input-sm form-control select2   inline"   name="platform" id="platform">
                      <option value="">平台选择</option>

                      {% platform_choices  as platform_list %}
                      {% for i in platform_list %}
                      <option value="{{ i }}">{{ i }}</option>

                      {% endfor %}

                    </select>
                  </div>

                  <div class="col-sm-2">
                    <select class="input-sm form-control select2   inline" name="vpnzone" id="vpnzone">
                      <option value="">VPN地区选择</option>
                      {% vpnzone_choices  as vpnzone_list %}
                      {% for i in vpnzone_list %}
                      <option value="{{ i }}">{{ i }}</option>

                      {% endfor %}
                    </select>
                  </div>

                  <div class="col-sm-2">
                    <button type="submit" class="btn btn-sm btn-primary"> 搜索</button>
                  </div>
                </div>
              </form>
            </div>



            <!-- /.card-header -->
            <div class="table-responsive">
              <table id="host_table" class="table table-bordered table-hover">

                <thead class="text-center">
                  <tr>
                    <th>序号</th>
                    <th>IP</th>
                    <th>floatingip</th>
                    <th>instance</th>
                    <th>serverid</th>
                    <th>platform</th>
                    <th>vpnzone</th>
                    <th>region</th>
                    <th>status</th>
                    <th>操作</th>
                  </tr>
                </thead>


                <tbody class="text-center">
                  {% for item in page_obj.object_list%}
                  <tr>

                    <td>{{ forloop.counter }}</td>
                    <td>{{ item.ip }}</td>
                    <td>{{ item.floatingip }}</td>
                    <td>{{ item.instance_id}}</td>
                    <td>{{ item.serverid }}</td>
                    <td>{{ item.platform }}</td>
                    <td>{{ item.vpnzone }}</td>
                    <td>{{ item.region }}</td>
                    <td>{{ item.status}}</td>

                    <td>
                      <span class="hidden" style="display:none">{{ item.id }}</span>
                      <button id="connection" type="button" class="btn btn-primary">连接</button>
                      <button id="restart" type="button" class="btn  btn-info fa fa-repeat">重启</button>
                    </td>
                  </tr>
                  {% empty %}
                  <tr>没有可用帐号</tr>
                  {% endfor %}
                </tbody>
                <!-- <tfoot>
                  <tr>
                    <th>主机名</th>
                    <th>IP</th>
                    <th>端口</th>
                    <th>版本</th>
                    <th>操作</th>
                  </tr>
                </tfoot> -->
              </table>



       
                <!-- <nav aria-label="Page navigation"> -->
                  <div class="box-footer clearfix"> 
                        <ul class="pagination pagination-sm no-margin pull-right">
                <!-- <ul class="Page navigation pagination  pull-right"> -->

                  <li><a href="{% url 'core:hosts' %}?page=1">首页 </a></li>

                  {% if  page_obj.has_previous %}
                  <li class="long"><a href="?{{ page_obj.previous_page_number.querystring }}">上一页</a>
                  </li>
                  {% endif %}

                  {% for page in  page_obj.pages %}
                  {% if page %}
                  {% ifequal page  page_obj.number %}
                  <li class="active"><a href="?{{ page.querystring }}">{{ page }}</a>
                  </li>
                  {% else %}
                  <li><a href="?{{ page.querystring }}" class="page">{{ page }}</a>
                  </li>
                  {% endifequal %}
                  {% else %}
                  <li class="none"><a href="">...</a></li>
                  {% endif %}
                  {% endfor %}
                  {% if ecs_list.has_next %}
                  <li class="long"><a href="?{{ next_page_number.querystring }}">下一页</a>
                  </li>
                  {% endif %}
                  <li>
                    <a href="{% url 'core:hosts' %}?page={{ paginator.num_pages }}">尾页 </a>
                  </li>
                  <li><span style="color: #0a0a0a">总: &nbsp;{{ paginator.num_pages }} 页</span>
                  </li>
                </ul>
                </div> 
                <!-- </nav> -->
           
            </div>


            <!-- /.card-body -->
          </div>
          <!-- /.card -->

        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->

      <div id="term"> </div>
      <div id="disconnect">
        <button type="button" class="btn btn-danger">关闭连接</button>
      </div>

    </div>
    <!-- /.container-fluid -->


  </section>


</article>

<!-- /.content -->
<!-- <div class="center">
  {% include "pagination.html" %}
</div> -->
{% endblock %}
{% block footer-js %}

<script>
  // var filter_dict = {{ filter_dict | safe}};   // 搜索完之后，还能保存搜索项目
  // $("#hostname").val(filter_dict['hostname__icontains']);
  // $("#platform").val(filter_dict['platform']);
  // $("#vpnzone").val(filter_dict['vpnzone']);

  function fomrReset() {
    document.getElementById("myform").reset();
  }
</script>


<script>
  $(function () {
    $('#host_table').DataTable({
      "paging": false,
      // 允许分页
      "lengthChange": true,
      //允许改变每页显示的行数
      "searching": false,
      //允许内容搜索
      "ordering": true,
      //允许排序   
      "info": false,
      //显示信息        
      "autoWidth": true
    });
  });
</script>






<script>
  function openTerminal(options) {
    //创建websocket通道
    var client = new SSHClient();
    var term = new Terminal(
      {
        cols: 80,
        rows: 24,
        handler: function (key) { client.send(key); },
        screenKeys: true,
        useStyle: true,
        cursorBlink: true
      });
    term.open();
    $('.terminal').detach().appendTo('#term');
    term.write('开始连接......');
    client.connect(
      $.extend(options,
        {
          onError: function (error) { term.write('错误： ' + error + '\r\n'); },
          onConnect: function () { term.write('\r'); },
          onClose: function () { term.write('对方断开了连接.......'); }, //term.destroy();
          onData: function (data) { term.write(data); }
        }
      )
    );

  }
</script>


<script>
  $(document).ready(function () {
    //初始化情况下，关闭链接的按钮是隐藏的
    $('#disconnect').hide();

    //点击关闭链接，清除终端div中的内容，显示表格。需要先在终端内exit退出ssh链接！
    $('#disconnect button').click(function () {
      $('#term').empty();
      $('div.table-responsive').show();
      $('#disconnect').hide();
    });

    //点击连接按钮，开启websocket通道，进行数据传输
    $('#host_table #connection').click(function () {
      $('div.table-responsive').hide();
      $('footer').hide();
      $('#disconnect').show();
      var des_id = $(this).parent().children().first().text();
      var options = {
        des_id: des_id
      };
      //打开Web模拟的ssh终端
      openTerminal(options);
    });
  });
</script>



{% endblock %}